React Hooks
React v16.8~
関連
ReactHooksのルール
React Hooksを集めたlibraryなど
hooksの内部実装
primitiveなhooks
useState
useEffect
useMemo
useCallback
useRef
useReducer
useContext
useLayoutEffect
useTransition
useDeferredValue
useMutationEffect
useImperativeHandle
useDebugValue
eslint-plugin-react-hooks
React HooksのTest
今まで辛かったこと
stateをもたないものはSFC, 持つものはClassだったので、
前者をstateが持つように修正する時にだるかった
一つのコンポーネントが大きくなりライフサイクルが増えるとバグの温床になる
単純に複雑で理解が難しい
HoCやrender propなどのWrapper Hellが起こる
props drillingが起こる
AOTコンパイルはクラスと相性が悪い？ ref
Prepackというのがあるらしい
結局何が嬉しかったのか
あるコンポーネントがstateを持つように変更してもclassに書き直す必要がない
useState
ロジックを再利用できる
関連するstateをまとめる
subscriptionやfetchなど
OSSでのロジックの共有もできる
props drillingが減る
HoCの多用の必要がない
わかりにくいライフサイクルを使わないで済む
useEffectを使うことで、処理が上から下へ進む
AOTコンパイルと相性がいい？ ref
FCがclassと変わること
FCは上から下へ処理が流れる
classのときと大きく異なる
contructor, componentDidMount, componentDidUnmountなどは、そのライフサイクルのタイミングでしか呼び出されなかった
参考
【React】新機能hooks - Qiita
React Conf 2018のKeynoteで発表されたHooks、Concurrent Reactのまとめ - Cybozu Inside Out | サイボウズエンジニアのブログ
🎉React 16.8: 正式版となったReact Hooksを今さら総ざらいする - Qiita